<template>
  <canvas @mousewheel="mousewheel" @mousemove="mousemove" @mousedown="mousedown" @mouseup="mouseup"
    @mouseleave="mouseleave" :style="`background-color: ${backgroundColor}; cursor: pointer`" :width="width"
    :height="height" ref="canvas"></canvas>
</template>

<script>
import moment from 'moment';
export default {
  props: {
    markTime: {     // 需要标记的时间
      type: Array,
      default() {
        return []
      }
    },
    startMeddleTime: String,  // 中间的时间,
    timeRange: {     // 时间范围
      type: Array,
      default() {
        return []
      }
    },
    width: {
      type: Number | String,
      default: 1000
    },
    height: {
      type: Number | String,
      default: 60
    },
    backgroundColor: {
      type: String,
      default: "#2b2f33"
    }
  },
  data() {
    return {
      whole_hour: 24,       // 整个canvas显示多少个小时
      canvas_width: null,   // canvas的宽度
      meddleTime: "2022-08-24 12:00:00",
      mouseDown: false,     // 移动时鼠标有没有按下
      mouseDownPosition: "",   // 鼠标按下时的位置
      mouseDownMeddleTime: "",   // 鼠标按下时中间的时间,
      isMove: false            // 鼠标按下时有没有移动
    }
  },
  mounted() {
    let time;
    if (this.timeRange[0] && this.timeRange[1]) {
      time = moment((new Date(this.timeRange[0]).getTime() + new Date(this.timeRange[1]).getTime()) / 2).format("YYYY-MM-DD HH:mm:ss");
      console.log(time)
    }
    this.meddleTime = this.startMeddleTime || time || moment(new Date()).format("YYYY-MM-DD 12:00:00");
    this.ctx = this.$refs.canvas.getContext("2d");
    this.canvas_width = this.$refs.canvas.width;
    this.drowMeddleLine(this.meddleTime);
    this.drowScaleLine();
    this.drowMark();
    // console.log(this.canvas_width )

    // const start = moment('2017-11-08 11:42');
    // const remainder = 20 - (start.minute() % 20);
    // const dateTime = moment(start).add(remainder, "minutes").format("YYYY-MM-DD HH:mm:ss");
    // console.log(this.markTime);
  },
  methods: {
    mouseleave() {
      this.$refs.canvas.width = this.$refs.canvas.width;
      this.drowMeddleLine(this.meddleTime);
      this.drowScaleLine();
      this.drowMark();
      this.mouseDown = false;
    },
    mousemove(e) {   // 鼠标移动
      // console.log(e.offsetX)
      this.$refs.canvas.width = this.$refs.canvas.width;
      this.drowMeddleLine(this.meddleTime);
      this.drowMoveLine(e);
      this.drowScaleLine();
      this.drowMark();
      if (this.mouseDown) {
        this.mouseDownMove(e);
        this.isMove = true;
      }
    },
    mousewheel(e) {    // 滚动鼠标滚轮
      // console.log(e.wheelDelta)
      e.preventDefault()
      if (e.wheelDelta > 0) { // 时间变短
        if (this.whole_hour - 6 == 0) {
          this.whole_hour = 2;
          return;
        }
        if (this.whole_hour > 6) {
          this.whole_hour -= 6;
        }
      } else {   // 时间变长
        if (this.whole_hour == 2) {
          this.whole_hour = 6;
          return;
        }
        if (this.whole_hour < 24) {
          this.whole_hour += 6;
        }
      }
      this.$refs.canvas.width = this.$refs.canvas.width;
      this.drowMeddleLine(this.meddleTime);
      this.drowScaleLine();
      this.drowMark();
    },
    mousedown(e) {   // 按下鼠标
      // console.log(e.offsetX)
      this.mouseDown = true;
      this.mouseDownPosition = e.offsetX;
      this.mouseDownMeddleTime = this.meddleTime;
      this.isMove = false;
    },
    mouseup(e) {   // 抬起鼠标
      this.mouseDown = false;
      let date = e.offsetX * this.time_px * 1000 + this.startTime;
      if (
        (this.timeRange[0] && date < new Date(this.timeRange[0]).getTime())
        ||
        (this.timeRange[1] && date > new Date(this.timeRange[1]).getTime())
      ) {
        return;
      }
      // this.isMove || this.$emit("click", moment(date).format("YYYY-MM-DD HH:mm:ss"));
      if (!this.isMove) {
        this.$emit("click", moment(date).format("YYYY-MM-DD HH:mm:ss"));
        this.meddleTime = moment(date).format("YYYY-MM-DD HH:mm:ss");
        this.$refs.canvas.width = this.$refs.canvas.width;
        this.drowMeddleLine(this.meddleTime);
        this.drowMoveLine(e);
        this.drowScaleLine();
        this.drowMark();
      }
    },
    mouseDownMove(e) {     // 鼠标按下移动
      // console.log(e.offsetX - this.mouseDownPosition)
      let offset = this.mouseDownPosition - e.offsetX;
      let date = new Date(this.mouseDownMeddleTime).getTime() + offset * this.time_px * 1000;
      if (
        (this.timeRange[0] && date < new Date(this.timeRange[0]).getTime())
        ||
        (this.timeRange[1] && date > new Date(this.timeRange[1]).getTime())
      ) {
        return;
      }
      // console.log(moment(date).format("YYYY-MM-DD HH:mm:ss"))
      this.meddleTime = moment(date).format("YYYY-MM-DD HH:mm:ss");
      this.drowMeddleLine(this.meddleTime)
    },
    drowMoveLine(e) {      // 画鼠标移上去的线
      let date = this.startTime + e.offsetX * this.time_px * 1000;
      if (
        (this.timeRange[0] && date < new Date(this.timeRange[0]).getTime())
        ||
        (this.timeRange[1] && date > new Date(this.timeRange[1]).getTime())
      ) {
        return;
      }
      this.ctx.beginPath();
      this.ctx.moveTo(e.offsetX - 1, 0);
      this.ctx.lineTo(e.offsetX - 1, 62);
      this.ctx.strokeStyle = "grey";
      this.ctx.lineWidth = 1;
      this.ctx.stroke();
      this.ctx.fillStyle = "rgb(64, 196, 255";
      this.ctx.fillText(moment(date).format("YYYY-MM-DD HH:mm:ss"), e.offsetX - 50, 55);
    },
    drowMeddleLine(time) {   // 画中间时间的线
      this.ctx.beginPath();
      this.ctx.moveTo(this.canvas_width / 2, 0);
      this.ctx.lineTo(this.canvas_width / 2, 31);
      this.ctx.strokeStyle = "rgb(64, 196, 255";
      this.ctx.lineWidth = 1;
      this.ctx.stroke();
      this.ctx.fillStyle = "rgb(64, 196, 255";
      this.ctx.fillText(time, this.canvas_width / 2 - 50, 40);
    },
    drowScaleLine() {   // 画刻度线
      this.getFirstLineTime()
      let time = new Date(this.getFirstLineTime()).getTime() - this.startTime;
      let p = time / 1000 / this.time_px;
      // // console.log(this.scaleLine_time, this.startTime);
      // let date = new Date(this.startTime).getHours() + 1;
      // let goDate = moment(this.startTime).format(`YYYY-MM-DD ${date}:00:00`)
      // // console.log(goDate)
      // let p = (new Date(goDate).getTime() - this.startTime) / (this.time_px * 1000);
      // // console.log(p)
      let line_px = this.scaleLine_time / this.time_px;   // 每条线之间的间隔
      // let k = 1
      for (let i = p; i <= this.canvas_width; i += line_px) {
        let date = this.startTime + i * this.time_px * 1000;
        // if(date < new Date(this.timeRange[0]).getTime() || date > new Date(this.timeRange[1]).getTime()) {
        //     continue;
        // }
        if (
          (this.timeRange[0] && date < new Date(this.timeRange[0]).getTime())
          ||
          (this.timeRange[1] && date > new Date(this.timeRange[1]).getTime())
        ) {
          continue;
        }

        // console.log(i)
        this.ctx.beginPath();
        this.ctx.moveTo(i, 0);
        this.ctx.lineTo(i, 20);
        this.ctx.strokeStyle = "grey";
        this.ctx.lineWidth = 1;
        this.ctx.stroke();

        let time = moment(date).format("HH:mm")
        if (time == "00:00") {
          let show_time = moment(date).format("YYYY-MM-DD HH:mm:ss")
          this.ctx.fillStyle = "grey";
          this.ctx.fillText(show_time, i - 50, 30);
          continue;
        }
        // console.log(time)
        if (this.show_time.includes(time)) {
          this.ctx.fillStyle = "grey";
          this.ctx.fillText(time, i - 10, 30);
        }
        // if(k == 1 || (k - 1) % 3 == 0) {

        //     this.ctx.fillStyle = "grey";
        //     this.ctx.fillText(time, i - 10, 30);
        // }
        // k++;
      }
    },
    getFirstLineTime(startTime) {    // 获取第一个需要划线的时间
      const start = moment(this.startTime);
      if (this.whole_hour > 18) {
        const remainder = 60 - (start.minute() % 60);
        return moment(start).add(remainder, "minutes").format("YYYY-MM-DD HH:mm");
      }
      if (this.whole_hour >= 12) {
        const remainder = 30 - (start.minute() % 30);
        return moment(start).add(remainder, "minutes").format("YYYY-MM-DD HH:mm");
      }
      if (this.whole_hour >= 6) {
        const remainder = 20 - (start.minute() % 20);
        return moment(start).add(remainder, "minutes").format("YYYY-MM-DD HH:mm");
      }
      const remainder = 10 - (start.minute() % 10);
      return moment(start).add(remainder, "minutes").format("YYYY-MM-DD HH:mm");
    },
    showTime(time) {

    },
    drowMark() {    // 画标记的时间
      // console.log(this.markTime)
      this.markTime.forEach(item => {
        this.ctx.fillStyle = item.bgColor;
        let beginTime = (this.timeRange[0] && new Date(item.beginTime).getTime() < new Date(this.timeRange[0]).getTime()) ? this.timeRange[0] : item.beginTime;
        let endTime = (this.timeRange[1] && new Date(item.endTime).getTime() > new Date(this.timeRange[1]).getTime()) ? this.timeRange[1] : item.endTime;
        let start_x = (new Date(beginTime).getTime() - this.startTime) / 1000 / this.time_px;
        let end_x = (new Date(endTime).getTime() - this.startTime) / 1000 / this.time_px;
        this.ctx.fillRect(start_x, 0, end_x - start_x, 20);
      })
    }
  },
  computed: {
    time_px() {    // 每像素多少秒
      return (this.whole_hour * 60 * 60) / this.canvas_width;
    },
    startTime() {  // canvas最左边的时间的时间戳
      // console.log(moment("2022-08-23 12:00:00").format("YYYY-MM-DD HH:mm:ss"))
      // return moment(new Date(this.meddleTime).getTime() - this.time_px * this.canvas_width / 2 * 1000).format("YYYY-MM-DD HH:mm:ss")
      return new Date(this.meddleTime).getTime() - this.time_px * this.canvas_width / 2 * 1000;
    },
    scaleLine_time() {   // 每个刻度线之间的时间间隔,单位秒
      if (this.whole_hour > 18) {
        return 60 * 60;
      }
      if (this.whole_hour >= 12) {
        return 30 * 60;
      }
      if (this.whole_hour >= 6) {
        return 20 * 60;
      }
      return 10 * 60;
    },
    show_time() { // 那些时间需要展示
      if (this.whole_hour > 18) {
        return ["03:00", "05:00", "07:00", "09:00", "11:00", "13:00", "15:00", "17:00", "19:00", "21:00",]
      }
      if (this.whole_hour > 12) {
        return ["03:00", "05:00", "07:00", "09:00", "11:00", "13:00", "15:00", "17:00", "19:00", "21:00",];
      }
      if (this.whole_hour > 6) {
        return ["02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00",
          "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00"];
      }
      return ["01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00",
        "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00",
        "01:30", "02:30", "03:30", "04:30", "05:30", "06:30", "07:30", "08:30", "09:30", "10:30", "11:30", "12:30",
        "13:30", "14:30", "15:30", "16:30", "17:30", "18:30", "19:30", "20:30", "21:30", "22:30", "23:30",
      ];
    }
  }
}
</script>
